
/**
 * @fileoverview 
 *
 * @author honza.rychtar@gmail.com (Jan Rychtar)
*/

goog.provide('georeferencer.chart.Handler');

goog.require('georeferencer.chart.Sector');
goog.require('georeferencer.chart.Pie');
goog.require('goog.graphics.Path');
goog.require('goog.graphics');
goog.require('goog.events');
goog.require('goog.ui.Bubble');
goog.require('goog.events');
goog.require('goog.dom');
goog.require('goog.array');
goog.require('goog.color.names');

/**
 *
 * @param {number} size
 *   
 * @constructor
 */
georeferencer.chart.Handler = function(sql, size) {
//  /**
//   * @type {goog.graphics.AbstractGraphics}
//   * @private
//   */
//  graphics_ = goog.graphics.createSimpleGraphics(1000,1000, size,size);

  this.pie_ = new georeferencer.chart.Pie();

  this.sql_ = sql;

  this.size_ = size;
  
  this.radius_ = 100;

  this.dbUrl_ = 'http://www.google.com/fusiontables/api/query';

  this.callQuery_();
}


/**
 * @type {number}
 * @private
 */
georeferencer.chart.Handler.prototype.radius = 100;



georeferencer.chart.Handler.colors = [
  'blue',  
  'orange',
  'violet',
  'grenn',
  'yellow',
  'black',
  'brown',
  'silver'
];



georeferencer.chart.Handler.prototype.callQuery_ = function() {
  var url = this.dbUrl_ + '?sql=' + this.sql_ + '&jsonCallback=getData';
  var script = document.createElement('script');
  script.setAttribute('src', url);
  document.getElementsByTagName('head')[0].appendChild(script);  
}


georeferencer.chart.Handler.prototype.createPie = function(data) {
  var sectors = data['table']['rows'];
  for(var i = 0; i < sectors.length; i++) {
    var item = sectors[i];
    var name = item[0];
    var count = parseInt(item[1]);
    var color = goog.color.names[georeferencer.chart.Handler.colors[i]];
    var sector = new georeferencer.chart.Sector();
    sector.setName(name);
    sector.setColor(color);
    sector.setCount(count);  
    console.log(sector);
    this.pie_.addSector(sector);
  }
  this.pie_.attachPercentages(); 
  console.log(this.pie_);
  this.drawChart_();
};




georeferencer.chart.Handler.prototype.drawChart_ = function() {   
  var radius = this.radius_;
//  console.log(this.radius_);
//  console.log(this.size_);
  var x = radius + 5;
  var y = radius + 20;  
  var currentAngle = -90;
  var graphics = goog.graphics.createSimpleGraphics(1000,1000);//, this.size_, this.size_); 
  
  console.log(graphics.getCanvasElement().getElement());
  for (var i = 0; i < this.pie_.getNumberOfSectors(); i++) {
    var sector = this.pie_.getSectorAt(i);
      
    var fromAngle = currentAngle;
    var toAngle = sector.getPercentage() * 3.6 + fromAngle;     
    currentAngle = toAngle;
    var span = toAngle - fromAngle;
    var startX = x + goog.math.angleDx(fromAngle, radius);
    var startY = y + goog.math.angleDy(fromAngle, radius);     
    var fill = new goog.graphics.SolidFill(sector.getColor());      
    var stroke = new goog.graphics.Stroke('1px', 'white');
    var path = new goog.graphics.Path();    
    path.moveTo(x, y);      
    path.lineTo(startX, startY);        
    path.arcTo(radius, radius, fromAngle, span);
    path.close(); 
    //   console.log(path);
    var pathElem = graphics.drawPath(path, stroke, fill);
    
    
    var angleMean = (fromAngle + toAngle)/2;    
    var pointX = x + goog.math.angleDx(angleMean, radius);
    var pointY = y + goog.math.angleDy(angleMean, radius);
    var bubble = this.createBubble_(sector, pointX, pointY, pathElem);
    
   
    goog.events.listen(pathElem, goog.events.EventType.MOUSEOVER, this.onSectorMouseOver_(pathElem, bubble), false, pathElem);
    goog.events.listen(pathElem, goog.events.EventType.MOUSEOUT, this.onSectorMouseOut_(pathElem, bubble), false,pathElem);   
    
    
    var textFill = new goog.graphics.SolidFill('black');
    var textStroke = null;
    var font = new goog.graphics.Font(16, 'Times');
    graphics.drawText(sector.getName(), 250, i*30 + 3, 60, 50, 'left', null,
      font, textStroke, textFill);

    var percFill = new goog.graphics.SolidFill('white');
    var percFont = new goog.graphics.Font(14, 'Times');
    
    
    
    var dx = goog.math.angleDx(angleMean, radius);
    var percX = x + goog.math.angleDx(angleMean, radius - 10);
    var percY = y + goog.math.angleDy(angleMean, radius - 10);
    //  graphics.drawText(sector.getPercentage() + "%", percX, percY, 60, 200, 'left', null,
    //    percFont, stroke, percFill);
    if(span > 10) {
      if(dx < 0) {  
        graphics.drawTextOnLine(sector.getPercentage() + "%",percX, percY,x,y, 'left',
          percFont, stroke, percFill);
      } else {
        graphics.drawTextOnLine(sector.getPercentage() + "%",x,y,percX, percY, 'right',
          percFont, stroke, percFill);      
      }
    }


    graphics.drawRect(220, i*30 , 20, 20, stroke, fill);

  }    
    
  graphics.render(goog.dom.getElement('chart'));
     
};  


georeferencer.chart.Handler.prototype.createBubble_ = function(sector, pointX, pointY, pathElem) { 
var bubble = new goog.ui.Bubble(sector.getName());
      bubble.setAutoHide(false);
    bubble.attach(pathElem.getElement());
      bubble.setPosition(new goog.positioning.AbsolutePosition(
          parseInt(pointX + 176), parseInt(pointY + 8)));     
      //bubble.setPinnedCorner(parseInt(0));
      bubble.render();      
      bubble.setVisible(true);
      return bubble;
};



georeferencer.chart.Handler.prototype.onSectorMouseOver_ = function(pathElem, bubble) { 
  return function(e) {
    pathElem.setFill(new goog.graphics.SolidFill(pathElem.getFill().getColor(),0.5));
    bubble.setVisible(true);
  }
};


georeferencer.chart.Handler.prototype.onSectorMouseOut_ = function(pathElem, bubble) {
  return function(e) {
    pathElem.setFill(new goog.graphics.SolidFill(pathElem.getFill().getColor(),1));
    bubble.setVisible(false);
  }
};


